<template>
  <div class="">
    <header>
      <img src="../assets/logo.png" alt="">
      <section>
          <h4>{{detailObj.name}}</h4>
          <p>{{detailObj.category}}</p>
          <span>公告：{{detailObj.promotion_info}}</span>
      </section>
      <i class="iconfont icon-xiangyoujiantou"></i>
    </header>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from 'vue-router';
import api from '../api/request';
export default {
  setup() {
    const route = useRoute();
    let id = route.query.id;
    // console.log(id);
    const data = reactive({
       detailObj:{}, // 详情的信息
    })
    api.get(`/shopping/restaurant/${id}`).then(res => {
        data.detailObj = res
    })
    return {
        ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
header{
    display: flex;
    align-items: center;
    padding: 10px;
    background: #c1bdc9;
    img{
        width: 100px;
    }
    p{
        font-size: 13px;
        margin: 10px 0;
    }

    span{
        font-size: 12px;
    }
}
</style>